<template>
  <div @touchmove.prevent class="animation-content">
    <div class="snake-one animate__animated"></div>
    <div class="snake-two animate__animated"></div>
    <div class="snake-three animate__animated"></div>
  </div>
</template>

<script>
export default {
  name: 'VAnimationContent',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss">
.animation-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  .snake-one,.snake-two,.snake-three {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30rem;
    height: 2rem;
    border-radius: 2rem;
    background-color: red;
    animation-iteration-count:infinite;
    --animate-duration: 5s;
    animation-name: moveSnakeTopRight;
  }
  .snake-two {
    background-color: rgb(0, 76, 255);
    animation-name: moveSnakeTopRight2;
    --animate-delay: 1s;
  }
  .snake-three {
    bottom: 20%;
    background-color: rgb(255, 251, 0);
    animation-name: moveSnakeTopRight3;
    animation-delay: 0.5s;
  }
}

@keyframes moveSnakeTopRight {
  0% {
    opacity: 1;
    -webkit-transform: rotate(-60deg) translate3d(0, 0, 0);
    transform: rotate(-60deg) translate3d(-100%, 400%, 0);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: rotate(-60deg) translate3d(100%, -100%, 0);
    transform: rotate(-60deg) translate3d(300%, -400%, 0);
  }
}
@keyframes moveSnakeTopRight2 {
  0% {
    opacity: 1;
    -webkit-transform: rotate(25deg) translate3d(0, 0, 0);
    transform: rotate(25deg) translate3d(-300%, -2000%, 0);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: rotate(25deg) translate3d(100%, -1000%, 0);
    transform: rotate(25deg) translate3d(200%, 500%, 0);
  }
}

@keyframes moveSnakeTopRight3 {
  0% {
    opacity: 1;
    -webkit-transform: rotate(-10deg) translate3d(0, 0, 0);
    transform: rotate(-10deg) translate3d(-300%, 800%, 0);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: rotate(-10deg) translate3d(100%, -100%, 0);
    transform: rotate(-10deg) translate3d(300%, -800%, 0);
  }
}

</style>